<template>
    <div>
        <el-container style="height: 800px; border: 1px solid #eee;">
            <!-- <el-header style="font-size: 40px; background-color: rgb(238, 241, 246);"> ELEMENT-ForCharge </el-header>
            <el-container> -->
            <el-aside style="height: 900px;width: 200px;">
                <el-menu @select="handleSelect">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>导航一</template>
                        <el-menu-item-group>
                            <template slot="title">分组一</template>
                            <el-menu-item index="1-1">列表

                            </el-menu-item>
                            <el-menu-item index="1-2">图表</el-menu-item>
                        </el-menu-item-group>

                    </el-submenu>

                </el-menu>
            </el-aside>
            <el-container>
                <el-header class="header">
                    <div class="image">
                        一张图片
                    </div>
                    <el-button type="primary" icon="el-icon-message-solid" class="message"
                        @click="drawer = true">通知</el-button>
                    <el-drawer title="通知" :visible.sync="drawer" direction="rtl" :show-close="true" size="30%"
                        class="custom-drawer">
                        <div>
                            
                        
                        </div>
                    </el-drawer>
                    <div class="avatar">
                        <el-avatar
                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                    </div>
                    <div class="dropdown">
                        <el-dropdown>
                            <el-button type="primary">
                                个人信息<i class="el-icon-arrow-down el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>个人设置</el-dropdown-item>
                                <el-dropdown-item>个人信息</el-dropdown-item>
                                
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-header>
                <el-main>
                    <div v-if="Selection === '1-1'">
                        <div>
                            <el-button type="primary" @click="showAddForm = true">添加用户</el-button>
                            <el-button type="primary" @click="showChangeFrom = true">编辑用户</el-button>
                        </div>
                        <el-dialog title="添加用户" :visible.sync="showAddForm">
                            <el-form :model="newUser">
                                <el-form-item label="姓名" :label-width="formLabelWidth">
                                    <el-input v-model="newUser.name" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="Id" :label-width="formLabelWidth">
                                    <el-input v-model="newUser.id" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="语文" :label-width="formLabelWidth">
                                    <el-input v-model="newUser.chinese" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="英语" :label-width="formLabelWidth">
                                    <el-input v-model="newUser.english" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="数学" :label-width="formLabelWidth">
                                    <el-input v-model="newUser.math" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="showAddForm = false">取 消</el-button>
                                <el-button type="primary" @click="addUser">确 定</el-button>
                            </div>
                        </el-dialog>

                        <el-dialog title="编辑用户" :visible.sync="showChangeFrom">
                            <el-form :model="newUser">
                                <el-form-item label="姓名" :label-width="formLabelWidth">
                                    <el-input v-model="newUser.name" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="Id" :label-width="formLabelWidth">
                                    <el-input v-model="newUser.id" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="语文" :label-width="formLabelWidth">
                                    <el-input v-model="newUser.chinese" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="英语" :label-width="formLabelWidth">
                                    <el-input v-model="newUser.english" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="数学" :label-width="formLabelWidth">
                                    <el-input v-model="newUser.math" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="showChangeFrom = false">取 消</el-button>
                                <el-button type="primary" @click="updateUser">确 定</el-button>
                            </div>
                        </el-dialog>

                        <el-table :data="tableData">
                            <el-table-column prop="name" label="姓名" width="140">
                            </el-table-column>
                            <el-table-column prop="id" label="Id" width="120">
                            </el-table-column>
                            <el-table-column prop="chinese" label="语文">
                            </el-table-column>
                            <el-table-column prop="english" label="英语">
                            </el-table-column>
                            <el-table-column prop="math" label="数学">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="del(scope.row.id)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div v-if="Selection === '1-2'">
                        <MyEcharts :chartData="tableData"></MyEcharts>
                    </div>

                </el-main>
            </el-container>
        </el-container>

    </div>
</template>

<script>
import axios from 'axios';
import MyEcharts from '@/components/MyEcharts.vue';
export default {
    components: {
        MyEcharts
    },
    created() {
        axios.get('/user').then(res => {
            this.tableData = res.data
        })
    },
    data() {
        return {
            show: true,
            Selection: '',
            tableData: [],
            showAddForm: false,
            newUser: {
                name: '',
                id: '',
                chinese: '',
                english: '',
                math: ''
            },
            formLabelWidth: '120px',
            showChangeFrom: false, 
            drawer: false
        }
    },
    methods: {
        del(id) {
            axios.delete(`/user/${id}`).then(() => {
                this.tableData = this.tableData.filter(item => item.id != id)
            })
        },
        handleSelect(index) {
            this.Selection = index
        },
        addUser() {
            const newUser = {...this.newUser}
            axios.post('/user', newUser).then(res => {
                const newUser = res.data
                this.tableData.push(newUser)
                this.showAddForm = false
                this.newUser = {
                    name: '',
                    id: '',
                    chinese: '',
                    english: '',
                    math: ''
                }
                alert('添加成功')
            }).catch(() => {
                alert("输个信息都输不来 菜就多练")
            })
        },
        updateUser() {
            const updatedUser = {...this.newUser}
            axios.put(`/user/${updatedUser.id}`, updatedUser).then(res => {
                const updatedUser = res.data
                const index = this.tableData.findIndex(user => user.id === updatedUser.id)
                if (index !== -1) {
                    this.$set(this.tableData, index, updatedUser)
                }
                this.showChangeFrom = false
                this.newUser = {
                    name: '',
                    id: '',
                    chinese: '',
                    english: '',
                    math: ''
                }
                alert('编辑成功')
            }).catch(() => {
                alert("编辑失败，请检查输入信息")
            })
        }
    }
}

</script>

<style>
.header {
    background-color: #337ab7;
    margin: 0px;
}
.message {
    position: relative;
    top: 20%;
    left: 85%;
    padding: 0px;
}
.custom-drawer {
    height: 60%;
    overflow: auto;
}
.avatar{
    position: relative;
    left: 88%;
    top: -45%;
}
.dropdown{
    position: relative;
    left: 92%;
    top: -115%;
    margin: 0px;
}
.image{
    position: absolute;
    top: 2%;
}
</style>

```
